<template>
    <div class="page page_container">
        <div class="card_wapper">
            <tab active-color="#333333" 
                :line-width="2" 
                bar-active-color="#cccccc"
                class="tabStyle"
            >
                <tab-item :selected="barStatus=='00'" @on-item-click="onItemClick">未使用 ( {{unuserCount}} )</tab-item>
                <tab-item :selected="barStatus=='01'" @on-item-click="onItemClick">已使用 ( {{usedCount}} )</tab-item>
                <tab-item :selected="barStatus=='02'" @on-item-click="onItemClick">已过期 ( {{expiredCount}} )</tab-item>
            </tab>
            <!-- 针对中秋月饼商品优惠券 -->
            <div class="public_list pt10 pb10 borderbox flex col" 
                v-for="(item,index) in coupList" :key="index" 
                v-if="item.couponId == codeInfo.hexiao">
                <div class="flex col textL gary vux-1px-b w100" @click="toNext('categoryDetail',{cateNo:'PN20180823000134'})">
                    <p class="fs16 bold h18 lh18">{{item.name | sliceString(12)}}</p>
                    <span class="mt8 mb8">{{barStatus=='01'?'':('数量:'+item.num)}}&nbsp;</span>
                    <span class="mb10">使用期限:{{item.validatyBegin}}-{{item.validatyEnd}}</span>
                </div>
                <div class="w100 h30 flex flexSpaceB mt5" v-if="barStatus=='00'">
                    <span class="pl12 pr12 pt4 pb4 br10 bgPrice whiteText" @click.stop="lijiuser(item)">立即使用</span>
                    <span class="pl12 pr12 pt4 pb4 br10 bgPrice whiteText" @click.stop="hexiao(item)">线下自提</span>
                    <div class="flex flexCenter price" @click="share(item)">
                        <img class="w18 h18 mr8" src="../../../assets/attorn.png" />
                        <span>转让</span>
                    </div>
                    <div class="flex flexCenter price" @click="WXshare(item)">
                        <img class="w16 h16 mr8" src="../../../assets/share.png" />
                        <span>分享</span>
                    </div>
                </div>
            </div>

            <!-- 普通卡券 -->
            <div class="public_list" 
                v-for="(item,index) in coupList" :key="index" 
                v-if="item.couponId != codeInfo.hexiao">
                <div class="left flex flexJCA col gary">
                    <div class="title gary fs16 bold">{{item.name | sliceString(12)}}</div>
                    <div>{{item.thirdDesc}}</div>
                    <div>{{barStatus=='01'?'':('数量:'+item.num)}}&nbsp;</div>
                    <div>{{item.validatyBegin}}-{{item.validatyEnd}}</div>
                </div>
                <div class="right" v-if="barStatus=='00'">
                    <div @click="lijiuser(item)">立即使用</div>
                    <div @click="share(item)">转让</div>
                    <div @click="WXshare(item)">分享</div>
                </div>
                <div class="right" v-if="barStatus=='01'||barStatus=='02'">
                    
                </div>
            </div>
       </div>
        <div class="mask" v-if="shareState" @click="hideShareState">
            <img src="../../../images/shareIndexTop.png"/>
        </div>
        <div class="nodata" v-if="coupList.length==0">
            <img src="./../../../assets/noshop.png" alt="">
            <p class="fontcolor">暂时没有优惠呢,去看看别的吧</p>
        </div>
       <div class="qr_code" v-if="qrshow">
            <div class="qrtitle">{{qrTitle}}</div>
            <img :src="imgurl" alt="">
       </div>
       <div class="Mask" @click="maskHide" v-if="maskShow"></div>
    </div>
</template>


<script>
import { Cell,MessageBox,Toast } from 'mint-ui';
import { Tab, TabItem } from 'vux';
import {shareQrCodeLink,queryShareCoupon,queryMyShareList,shareCouponLink,queryVerificationCoupon} from "src/methods/request.js";
import { Common } from 'src/methods/common.js'
import { setWXConfig,shareIndex,shareMyVouchers } from 'src/methods/baseinfo.js'
import mixins,{ restShare } from 'mixins';
import { codeInfo } from 'methods/packageConfig.js';

export default {
    mixins:[restShare,mixins],
    // 最顶部黑色栏
    data () {
        return {
            integral:"",
            coupList:[],
            imgurl:"",
            maskShow:false,
            qrshow: false,
            shareState:false,
            qrTitle:"",
            link:"",
            usedCount:'0',//已使用数量
            unuserCount:'0',//未使用数量
            expiredCount:'0',//过期数量
            barStatus:'00',//当前显示状态 00已使用  01未使用 03已过期
            codeInfo:codeInfo(),    //显示券编码
        }
    },
    components: {
        Tab,
        TabItem,
    },
    created(){
        //   Common.getSign(true);
        setWXConfig(window.location.href.split('#')[0]);
        wx.showOptionMenu();
        this.$store.commit('increment',"卡券")
        this.getquanlist();
    },
    methods:{
        hideShareState(){
            this.shareState = false;
            this.getquanlist();
        },
        //转让
        share(item){
            this.qrTitle = item.name;
            queryShareCoupon({"userCouponNo":item.userCouponNo,"mchtId":item.mchtId}).then(
                response => {
                        if(response.rspCode == '0000'){
                            if(response.data.resCode == '0000'){
                                this.geterweima(response.data.shareCouponNo)//获取二维码
                            }else if(response.data.resCode == '7015'){
                                Toast({ message: response.data.message,position: 'middle',duration: 3000});
                                this.getquanlist();
                            }else{
                                Toast({ message: response.data.message,position: 'middle',duration: 3000});
                            }
                        }else{
                            Toast({ message: '获取二维码失败',position: 'middle',duration: 3000});
                        }
            }).catch(error => console.log(error) );     
        },
        geterweima(shareCouponNo){
            shareQrCodeLink({shareCouponNo:shareCouponNo}).then(response => {
                this.imgurl = 'data:image/png;base64,'+ response.data.QRcode;
                this.qrshow = true;
                this.maskShow = true;
            }).catch(error => console.log(error) );
        },
        WXshare(item){
            queryShareCoupon({"userCouponNo":item.userCouponNo,"mchtId":item.mchtId}).then(
                response => {
                    if(response.rspCode == '0000'){
                        if(response.data.resCode == '0000'){
                            const shareCouponNo = response.data.shareCouponNo
                            this.shareState = true;
                            this.getshareLink(shareCouponNo)
                        }else if(response.data.resCode == '7015'){
                            Toast({ message: response.data.message,position: 'middle',duration: 3000});
                            this.getquanlist();
                        }else{
                            Toast({ message: response.data.message,position: 'middle',duration: 3000});
                        }
                    }else{
                        Toast({ message: '获取分享码失败',position: 'middle',duration: 3000});
                    }
            }).catch(error => console.log(error) );
        },
    //   微信分享
        getshareLink(shareCouponNo){
            shareMyVouchers(shareCouponNo,()=>{
                this.shareState = true;
            });
        },
        maskHide(){
            this.qrshow = false;
            this.maskShow = false;
            this.getquanlist();
        },
    //   立即使用进入商品列表
        lijiuser(item){
            this.$router.push({
                path:"/category",
                query:{ couponNo:item.couponId,type:'1',cateName:"优惠商品",cateNo:"08" }
            })
        },
        //获取订单
        getquanlist(val){
            this.$vux.loading.show({text: 'Loading'})
            //获取列表
            //保存查询数据类型
            let status = val || this.$route.query.types || '00';
            this.barStatus = status;
            queryMyShareList({"status":status}).then(res => {
                    this.$vux.loading.hide()
                    if(res.rspCode == '0000'){
                        this.coupList = res.data.couponList || [];
                        this.usedCount = res.data.couponCount.couponUsed || '0';
                        this.unuserCount = res.data.couponCount.couponUnused || '0';
                        this.expiredCount = res.data.couponCount.couponExpired || '0';
                    }
                }).catch(error => {
                    console.log(error);
                    this.$vux.loading.hide();
                } );
        },
        //顶部切换页数据
        onItemClick(index){
            this.getquanlist('0'+index)
        },
        //核销功能
        hexiao(val){
            queryVerificationCoupon({userCouponNo:val.userCouponNo}).then(res=>{
                if(res.rspCode == '0000' && res.data.QRcode){
                    this.imgurl = 'data:image/png;base64,'+ res.data.QRcode;
                    this.qrTitle = val.name
                    this.qrshow = true;
                    this.maskShow = true;
                }else{

                }
            })
        }
    },
    beforeRouteLeave(to,from,next){
        shareIndex();
        next();
    }
};
</script>
<style lang="less" scoped>
@import "~src/components/css/gloState.less";
@import './index.less';
</style>